<template>
  <section class="order-table-box">
    <div v-if="!starOrder" class="order-filter-btns">
      <div
        v-for="btn in filterBtns"
        :key="btn.key"
        class="filter-btn"
        :class="btn.key === activeKey ? 'active-btn' : ''"
        @click="filterOrderType(btn.key)"
      >
        {{ btn.label }}
      </div>
    </div>
    <div class="table-contain">
      <OrderTable :columns="columns" :row-top="rowTop" :table-data="tableData">
        <template #payMethod="{ data }">
          <span class="paySpan" :style="{ color: orderPayMethod[data || 0].color }">
            <icon :type="orderPayMethod[data || 0].icon" :style="{ fontSize: '14px' }" />
            <span>{{ orderPayMethod[data || 0].text }}</span>
          </span>
        </template>
        <template #productName="{ data }">
          <div class="frist-td">
            <div class="left-img">
              <img class="thumbnail" :src="data.productPicUrl" alt="商品缩略图" />
            </div>
            <div class="right-msg">
              <a href="">{{ data.productName }}</a>
            </div>
          </div>
        </template>
        <template #rightsProtectionStatus="{ data }">
          <span>{{ orderRights[data.rightsProtectionStatus || 0] }}</span>
        </template>
        <template #status="{ data }">
          <span>{{ orderStatus[data.status || 0] }}</span>
        </template>
        <template #paidAmount="{ data }">
          <span>￥{{ data.paidAmount }}</span>
        </template>
      </OrderTable>
      <div class="table-bottom">
        <a-pagination
          v-model:current="orderParams.current"
          v-model:pageSize="orderParams.size"
          size="small"
          :total="total"
          :page-size-options="['5', '10', '15', '20']"
          :show-total="(total) => `共 ${total} 页`"
          show-size-changer
          show-quick-jumper
          @change="handlePageChange"
          @showSizeChange="handleSizeChange"
        />
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, reactive, inject, watch, toRefs, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ParamsData } from '@/model/order/AllOrder'
import OrderTable from '@/components/OrderTable/index.vue'
import { columns, filterBtns, rowTop, tableEnum1, tableEnum2, tableEnum3 } from './tableConfig'

export default defineComponent({
  components: {
    OrderTable,
  },
  props: {
    tableRes: {
      type: Object,
      default: null,
    },
  },
  emits: ['getTable'],
  setup(props, { emit }) {
    const route = useRoute()
    const state = reactive({
      filterBtns: [...filterBtns],
      orderPayMethod: [...tableEnum1],
      orderStatus: [...tableEnum2],
      orderRights: [...tableEnum3],
      columns: [...columns],
      rowTop: [...rowTop],
      activeKey: 0,
      tableData: [],
      total: 0,
      slotName: 'name1',
    })
    const starOrder = ref(false)
    const orderParams: ParamsData = inject('orderParams')!
    const filterOrderType = (key: number) => {
      orderParams.orderStatus = key
      orderParams.current = 1
      state.activeKey = key
      emit('getTable')
    }
    const handlePageChange = (page: number, pageSize: number) => {
      orderParams.size = pageSize
    }
    const handleSizeChange = (current: number, size: number) => {
      orderParams.size = size
      orderParams.current = 1
    }
    // 监听router区分加星订单页面
    watch(
      () => route.name,
      (value) => {
        let starVal = 1
        switch (value) {
          case 'orderAll':
            starOrder.value = false
            starVal = 1
            break
          case 'orderStar':
            starOrder.value = true
            delete orderParams.orderStatus // 删除订单状态参数
            starVal = 2
            break
          default:
            break
        }
        orderParams.size = 5 // 重置表格size
        orderParams.current = 1 // 表格页初始化为1
        orderParams.payStarredStatus = starVal // 加星参数赋值
        emit('getTable')
      },
      {
        immediate: true,
      },
    )
    watch(
      () => props.tableRes,
      (value) => {
        state.tableData = value.records
        state.total = value.total
      },
    )
    watch(
      () => [orderParams.current, orderParams.size],
      ([currentVal, sizeVal]) => {
        orderParams.size = sizeVal
        orderParams.current = currentVal
        emit('getTable')
      },
      {
        deep: true,
      },
    )
    return {
      starOrder,
      orderParams,
      ...toRefs(state),
      filterOrderType,
      handlePageChange,
      handleSizeChange,
    }
  },
})
</script>

<style lang="scss" scoped>
.order-table-box {
  margin-top: 20px;

  .order-filter-btns {
    display: flex;

    .filter-btn {
      width: 80px;
      cursor: pointer;
      text-align: center;
      color: #505050;
      background: rgba(243, 243, 243, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      padding: 8px 0;

      &:hover {
        background: #d9d9d9;
      }
    }

    .active-btn {
      background: #fff;
    }
  }
  .table-bottom {
    text-align: right;
  }
  .frist-td {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;

    .left-img {
      .thumbnail {
        width: 80px;
        height: 80px;
      }
    }

    .right-msg {
      text-align: left;
      margin: 10px 0 0 10px;
      max-height: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;

      a {
        color: rgba(42, 130, 228, 1);
      }
    }
  }
}
</style>
